<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <p id="vm2"></p>
    <hr>
    <p id="vm3"></p>

</body>
<script>
    console.log("Vue:",Vue);
    // let Comp = Vue.extend();
    
    // Vue.extend 可以接受一个 类似于 new Vue(options) options 配置项
    let Comp = Vue.extend({
        template:`
            <div style='color:red'>
                <h4>标题名</h4>
                <span @click="showTip()">内容</span>    
            </div>
        `,
        methods: {
            showTip(){
                alert(Math.random())    
            }
        },
    });

    console.log("Comp:",Comp);

    console.log("-----------------------");
    let vm1 = new Vue();
    let vm2 = new Comp();

    console.log("vm1:",vm1);
    console.log("vm2:",vm2);

    console.log("-----------------------");
    console.log("vm1 instanceof Vue:",vm1 instanceof Vue);
    console.log("vm2 instanceof Vue:",vm2 instanceof Vue);

    console.log("-----------------------");
    // vm2.$mount();
    vm2.$mount("#vm2");
    console.log(vm2.$el);


    console.log("-----------------------");
    // let vm3 = new Comp().$mount();
    let vm3 = new Comp().$mount("#vm3");

    console.log(vm3.$el);
    console.log(vm2.$el===vm3.$el);
</script>
</html>